import { FC, useState } from 'react'
import { View, Image } from '@tarojs/components'

import classnames from 'classnames'
import icons from './icon'
import './index.scss'

// 数字，列表，骰子，硬币，扑克，颜色

// export default class Tabbar extends Component {
//   render() {
//     return (
//       <View>
//         <View>123</View>
//       </View>
//     )
//   }
// }
type image = typeof icons.number

type TabbarProps = {
  changeTab: (number) => any
}

type TabbarItemProps = {
  src: image
  label: String
  active?: Boolean
  onClick: () => void
}

type Tab = {
  icon: image
  activeIcon: image
  label: String
}

const TabbarItem: FC<TabbarItemProps> = item => {
  return (
    <View
      className="flex flex-col justify-center items-center flex-shrink-0 rounded-lg tabbar-item"
      style={{ backgroundColor: item.active ? '#f8f5fc' : '#f7f8fa' }}
      onClick={() => item.onClick()}
    >
      <Image
        className={classnames({
          'tabbar-icon-ani': item.active
        })}
        style={{ width: '36px', height: '36px' }}
        src={item.src}
      />
      <View className="text-xs mt-2" style={{ color: '#bec1c6' }}>
        {item.label}
      </View>
    </View>
  )
}

const Tabbar: FC<TabbarProps> = ({ changeTab }) => {
  const tabList: Array<Tab> = [
    { icon: icons.number, activeIcon: icons.numberActive, label: '数字' },
    { icon: icons.list, activeIcon: icons.listActive, label: '列表' },
    { icon: icons.dice, activeIcon: icons.diceActive, label: '骰子' },
    { icon: icons.coins, activeIcon: icons.coinsActive, label: '硬币' },
    { icon: icons.poker, activeIcon: icons.pokerActive, label: '扑克' },
    { icon: icons.color, activeIcon: icons.colorActive, label: '颜色' }
  ]

  const [currentTabIndex, setCurrentTabIndex] = useState<number>(0)

  const handlerChangeTabIndex = (index: number) => {
    setCurrentTabIndex(index)
    changeTab(index)
  }

  const handlerShowHistory = () => {
    console.log('history')
  }

  return (
    <View className="absolute bottom-20 inset-x-0 mx-7">
      <View className="flex items-center bg-white rounded-lg overflow-x-scroll box-border tabbar-control">
        {tabList.map((item, index) => (
          <TabbarItem
            key={index}
            label={item.label}
            active={currentTabIndex === index}
            onClick={() => handlerChangeTabIndex(index)}
            src={currentTabIndex === index ? item.activeIcon : item.icon}
          />
        ))}
        <View className="flex-shrink-0" style={{ width: '76px', height: '1px' }}></View>
      </View>

      <View className="absolute tabbar-item-history">
        <TabbarItem src={icons.history} label="历史" onClick={() => handlerShowHistory()} />
      </View>
    </View>
  )
}

export default Tabbar
